<script setup lang="ts">
import customnavibar from './components/customNavibar.vue'
import BuyHighSwiper from '@/components/BuyHighSwiper.vue'
import { useBannerList } from '@/hooks/useBannerList'
import { BaseUrl } from '@/utils/request'
import XtxGuess from '@/components/XtxGuess.vue'
import skeleton from './components/skeleton.vue'
import hotRecommend from './components/hotRecommend.vue'
import { getCategoryListAPI, getHotRecommendListAPI } from '@/services/homeApi'
import { ref } from 'vue'
import { useguess } from '@/hooks/useGuessProduct'
import type { categoryType, categoryItem, HotRecommenditemType, ProductType } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import category from './components/category.vue'
import type Skeleton from './components/skeleton.vue'
const { banner_list, getBannerList } = useBannerList()
const { GuessProductList, scrolltolower, isFinished, page } = useguess()
const categoryList = ref<categoryType>()
const HotRecommendList = ref<HotRecommenditemType<ProductType>[]>([])
const showSkeleton = ref(true)
// 下拉刷新动画显示
const refresherTriggered = ref(false)
const getHotRecommendList = async () => {
  const res = await getHotRecommendListAPI()
  HotRecommendList.value = res.data!
}
const getCategoryList = async () => {
  const res = await getCategoryListAPI()
  categoryList.value = res.data
}
onLoad(async () => {
  await Promise.all([getCategoryList(), getBannerList(), getHotRecommendList()])
  showSkeleton.value = false
})
// 下拉刷新事件
const onrefresherrefresh = async () => {
  refresherTriggered.value = true
  // Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
  // 可以同时发送多个请求
  // 等待所有请求都完成后才执行回调。
  await Promise.all([getCategoryList(), getBannerList(), getHotRecommendList()])
  GuessProductList.value = []
  page.value = 1
  refresherTriggered.value = false
}
</script>
<template>
  <skeleton v-if="showSkeleton"></skeleton>
  <template v-else>
    <customnavibar></customnavibar>
    <!-- scroll-view 是一个滚动视图容器，用于显示长列表或滚动内容。放入其中的组件可以滚动，不放入的就是固定的-->
    <!-- refresher-enabled开启下拉刷新 refresherrefresh监听下拉事件-->
    <scroll-view
      refresher-enabled
      @refresherrefresh="onrefresherrefresh"
      :refresher-triggered="refresherTriggered"
      scroll-y
      class="scroll"
      @scrolltolower="scrolltolower"
    >
      <BuyHighSwiper v-if="banner_list.length > 0" :banner_list="banner_list"></BuyHighSwiper>
      <category v-if="categoryList" :list="categoryList"></category>
      <hotRecommend :list="HotRecommendList"></hotRecommend>
      <XtxGuess :list="GuessProductList" :isFinished="isFinished"></XtxGuess>
    </scroll-view>
  </template>
</template>

<style lang="scss">
//page 选择器在 Uni-app 中是有效的，它用于选择整个页面。
// 如果您在其他上下文中使用 page，它可能不会起作用。
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #efefef;
  .scroll {
    flex: 1;
  }
}
</style>
